import { IconMusic } from '@arco-design/web-react/icon'
import React,{memo} from 'react'

interface IProps {
  active: boolean
}
function Identify(props: IProps) {
  const { active } = props
  const classList = ["absolute w-full h-full top-0 left-0 rounded-full bg-opacity-50 bg-primary-300 opacity-0 transition-opacity duration-300 ease-in-out"]
  if (active) {
    classList.push("animate-ping shadow")
  }
  return (
      <div className={"size-32 mb-4 relative rounded-full bg-primary-600 flex justify-center items-center text-white text-center shadow ring"}>
        <IconMusic spin={active} style={{ fontSize: '27px' }}/>
        <div className={classList.join(" ")} style={{ opacity: active? 1 : 0 }}></div>
      </div>
  )
}

export default memo(Identify) // memo is used to optimize the rendering of the component
